<!--复选框-->
<template>
  <div class="example">
    <button class="button-block mb20" @click="visible = true">点我</button>
    <zz-dialog
      title='这是弹窗'
      @close="visible = false"
      v-drag
      :isBlueground = "false"
      titleTip="111"
      leftVal ='22'
      :visible = visible>
      <div style="width: 400px;height: 500px;">
        这是弹窗
      </div>
    </zz-dialog>
    <div class="tableClass">
      <table cellspacing="0">
        <tr>
          <th>1) 调用文件组件</th>
        </tr>
        <tr>
          <td><pre>{{explameCall}}</pre></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        visible: false,
        state: '',
        stateData: '',
        valueData: {id: 1},
        checkEd: true,
        explameCall: `<zz-dialog
          visible="false"  设置弹窗的显示或隐藏
          title="我是标题"  初始化复现框状态 默认关闭
          :closeOnClickModal="false" 点击背景是否直接关闭
          :showHeader = true 是否显示头部
          :showBut = true 是否显示头部关闭按钮
          :showFoot = true 是否显示整个底部
          :showConfirm = true 是否显示确定按钮
          :showCancel = true 是否显示取消按钮
          :reset = false 关闭窗口时 是否自动清除选择人员组件的id
          :isBackground = true 是否显示背景
          @confirm = confirm 确定的事件
          @cancel = confirm 取消的事件
          confirmVal = 确定
          cancelVal = 取消
          ></zz-dialog>`
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 35%;
    }
    .example-right{
      float: right;
      width: 60%;
      background: #fff;
      padding: 20px;
    }
  }
</style>
